<template>
  <div>
    <!-- 评分 -->
    <div class="evaluate">
      <div class="left-info">
        <h3>3.9</h3>
        <p>综合评分</p>
        <span>高于周边商家69.2%</span>
      </div>
      <div class="right-info">
        <div class="server">
          <span>服务态度</span>
          <van-rate
            readonly
            v-model="value"
            :size="18"
            color="#ffd21e"
            void-icon="star"
            void-color="#eee"
          />
          <p>3.9</p>
        </div>
        <div class="accord-with">
          <span>描述相符</span>
          <van-rate
            readonly
            v-model="value"
            :size="18"
            color="#ffd21e"
            void-icon="star"
            void-color="#eee"
          />
          <p>3.9</p>
        </div>
        <div class="deliveryTime">
          <span>送达时间</span>
          <span>44分钟</span>
        </div>
      </div>
    </div>
    <!-- 分割 -->
    <div class="partition"></div>
    <!-- 评论切换 -->
    <van-row>
      <van-col span="8">全部 8</van-col>
      <van-col span="8">满意 8</van-col>
      <van-col span="8">不满意 8</van-col>
    </van-row>
    <!-- 单选 -->
    <div class="radio">
      <i class="iconfont icon-gou"></i>
      <span>只看有内容的评价</span>
    </div>
    <!-- 评论 -->
    <ul class="comments">
      <li v-for="item in ratingData" :key="item.rateTime">
        <img :src="item.avatar" alt="" />
        <div>
          <span class="nickName">{{ item.username }}</span>
          <div class="score">
            <van-rate
              readonly
              v-model="item.score"
              :size="13"
              color="#ffd21e"
              void-icon="star"
              void-color="#eee"
            />
            <span>{{ item.deliveryTime ? item.deliveryTime : 0 }}分钟</span>
          </div>
          <p class="text">
            {{ item.text ? item.text : '...' }}
          </p>
          <div class="food">
            <van-icon name="good-job"></van-icon>
            <span v-for="v in item.recommend" :key="v">{{ v }}</span>
          </div>
        </div>
        <div class="send-time">{{ item.rateTime | format }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
import { rating } from '../../api/ratings'
export default {
  data() {
    return {
      // 评分
      value: 3,
      // 评论数据
      ratingData: ''
      // foods: ''
    }
  },
  created() {
    this.getRating()
  },
  methods: {
    async getRating() {
      const { data } = await rating()
      this.ratingData = data.data
      console.log(data.data)
    }
  }
}
</script>

<style lang="less" scoped>
.evaluate {
  display: flex;
  align-items: center;
  padding: 16px 5px;
  box-sizing: border-box;
  justify-content: center;
  .left-info {
    text-align: center;
    padding-right: 10px;
    border-right: 1px solid #ccc;
    h3 {
      color: #fe9c04;
      font-size: 24px;
    }
    p {
      font-size: 14px;
      line-height: 32px;
      font-weight: 700;
    }
    span {
      color: #989b9f;
      font-size: 12px;
    }
  }
  .right-info {
    font-size: 15px;
    margin-left: 10px;
    .server,
    .accord-with {
      display: flex;
      align-items: center;
      .van-rate {
        margin: -4px 15px 0;
      }
      p {
        margin-top: -4px;
        color: #fe9c04;
        font-size: 16px;
      }
    }
    .accord-with {
      margin: 18px 0;
    }
    .deliveryTime {
      span:first-child {
        margin-right: 15px;
      }
      span:last-child {
        margin-right: 15px;
        color: #989b9f;
      }
    }
  }
}
.partition {
  height: 15px;
  background-color: #f4f5f7;
  border-top: 1px solid #e7e7e7;
  border-bottom: 1px solid #e7e7e7;
}
.van-row {
  font-size: 14px;
  margin: 15px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 15px;
  .van-col {
    width: 60px;
    height: 35px;
    background-color: blue;
    text-align: center;
    line-height: 35px;
    margin-right: 10px;
  }
  .van-col:nth-child(1) {
    color: #fff;
    background-color: #00a0dc;
  }
  .van-col:nth-child(2) {
    color: #68747e;
    background-color: #ccecf7;
  }
  .van-col:nth-child(3) {
    color: #68747e;
    background-color: #eaebed;
  }
}
.radio {
  padding-left: 20px;
  color: #b7babf;
  border-bottom: 1px solid #ccc;
  padding-bottom: 16px;
  display: flex;
  align-items: center;
  .icon-gou {
    font-size: 22px;
    margin-right: 10px;
  }
  span {
    font-size: 16px;
  }
}
.comments {
  li {
    padding: 20px 0;
    margin: 0 20px;
    display: flex;
    position: relative;
    border-bottom: 1px solid #ebebeb;
    img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      margin-right: 10px;
    }
    .nickName {
      font-size: 12px;
    }
    .score {
      margin: 6px 0 4px;
      span {
        font-size: 14px;
        color: #ccc;
        margin-left: 10px;
      }
    }
    .text {
      font-size: 14px;
      line-height: 22px;
    }
    .food {
      display: flex;
      align-items: center;
      font-size: 14px;
      margin-top: 3px;
      color: #08121a;
      .van-icon {
        font-size: 16px;
        color: #01a2e0;
        margin-right: 10px;
      }
      span {
        border: 1px solid #ececec;
        padding: 3px;
        font-size: 12px;
        margin-right: 10px;
        color: #a5a9aa;
        box-sizing: border-box;
      }
    }
    .send-time {
      font-size: 12px;
      color: #ccc;
      position: absolute;
      top: 20px;
      right: 0;
    }
  }
}
</style>
